<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="运营素材库">
    <link rel="icon" href="img/favicon.ico" type="image/gif">
    <title>运营素材库-首页</title>
    <link rel="stylesheet" href="css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background-color: #f7f9fc;
        }

       .sidebar {
            width: 200px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
            overflow-y: auto;
            transition: width 0.3s ease;
        }

       .sidebar.collapsed {
            width: 60px;
        }

       .sidebar.collapsed .user-profile span,
       .sidebar.collapsed .search-box,
       .sidebar.collapsed a span:not(.sub-menu-short),
       .sidebar.collapsed .sub-menu-icon {
            display: none;
        }

       .sidebar.collapsed .sub-menu li a .sub-menu-short {
            margin: 0;
            display: inline;
            background: linear-gradient(135deg, #07C160 0%, #068445 100%); 
            color: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 15px;
            padding: 0;
            box-shadow: 0 4px 6px rgba(7, 193, 96, 0.15), 0 1px 3px rgba(7, 193, 96, 0.1);
        }

       .sub-menu-short {
            display: none;
        }

       .sidebar::-webkit-scrollbar {
            width: 0;
        }

       .sidebar .user-profile {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f2f5; 
        }

       .sidebar .user-profile .user-initials {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            background: linear-gradient(135deg, #07C160 0%, #068445 100%); 
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            border-bottom: 5px solid #068445; 
            border-right: 10px solid #fff;
        }

       .sidebar .search-box {
            margin: 10px 10px 10px 0px;
        }

       .sidebar .search-box input {
            width: 100%;
            padding: 8px;
            border: 1px solid #e5e6eb; 
            border-radius: 5px;
            background-color: #f7f9fc; 
            transition: border-color 0.3s ease;
        }

       .sidebar .search-box input:focus {
            outline: none;
            border-color: #07C160;
        }

       .sidebar a {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            color: #1d2129; 
            text-decoration: none;
            padding: 8px 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

       .sidebar a:hover {
            background-color: #e8f5e9;
        }

       .sidebar a i {
            width: 20px;
            margin-right: 10px;
            color: #07C160;
        }

       .main-content {
            flex: 1;
            padding: 0px 10px 10px 10px;
            display: flex;
            flex-direction: column;
        }

       .main-content .top-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 20px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

       .main-content .top-info span {
            font-size: 24px;
            font-weight: bold;
            color: #1d2129;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
        }

       .main-content .notification {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 230px;
        }

       .main-content .notification i,
       .main-content .notification .user-initials,
       .main-content .notification .logout-icon,
       .main-content .notification .collapse-btn,
       .main-content .notification .help-btn,
       .main-content .notification .fullscreen-btn { 
            color: #1d2129; 
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            background-color: #e8f5e9;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

       .main-content .notification i:hover,
       .main-content .notification .user-initials:hover,
       .main-content .notification .logout-icon:hover,
       .main-content .notification .collapse-btn:hover,
       .main-content .notification .help-btn:hover,
       .main-content .notification .fullscreen-btn:hover { 
            transform: scale(1.1);
            background-color: #d4edda; 
        }

       .main-content iframe {
            flex: 1;
            width: 100%;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
        }

       .sidebar .sub-menu {
            list-style-type: none;
            padding-left: 20px;
            display: none;
        }

       .sidebar .sub-menu li {
            margin-bottom: 5px;
        }

       .sidebar .sub-menu li a {
            padding: 5px 10px;
            color: #4e5969; 
        }

       .sidebar .sub-menu li a:hover {
            color: #07C160;
        }

       .sidebar .parent-menu .sub-menu-icon {
            margin-left: auto;
            margin-right: 0;
            color: #86909c; 
        }

       .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.3); 
        }

       .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #e5e6eb;
            width: 300px;
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); 
            text-align: center;
        }

       .modal-buttons {
            margin-top: 20px;
        }

       .modal-buttons button {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: opacity 0.3s ease;
        }

       .modal-buttons button.confirm {
            background: linear-gradient(135deg, #07C160 0%, #068445 100%); 
            color: white;
        }

       .modal-buttons button.confirm:hover {
            opacity: 0.9;
        }

       .modal-buttons button.cancel {
            background-color: #f7f9fc; 
            color: #1d2129; 
            border: 1px solid #e5e6eb; 
        }

       .modal-buttons button.cancel:hover {
            background-color: #f0f2f5;
        }

       .sidebar .user-profile span {
            background: linear-gradient(135deg, #07C160 0%, #068445 100%); 
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 22px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(7, 193, 96, 0.1);
        }

       .version-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3); 
        }

       .version-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            width: 380px;
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); 
            border: 1px solid #e5e6eb;
        }

       .version-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f2f5;
        }

       .version-header h3 {
            margin: 0;
            color: #1d2129;
            font-size: 16px;
            font-weight: 600;
        }

       .close-btn {
            color: #86909c; 
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

       .close-btn:hover {
            color: #1d2129; 
        }

       .version-info {
            margin-bottom: 15px;
            text-align: left;
        }

       .version-info p {
            margin: 5px 0;
            color: #4e5969;
            font-size: 14px;
        }

       .version-info p strong {
            color: #1d2129;
        }

       .qrcode-container {
            text-align: center;
            margin: 15px 0;
            padding: 10px;
            background-color: #f7f9fc; 
            border-radius: 8px;
        }

       .qrcode-container img {
            width: 150px;
            height: 150px;
            border: 1px solid #e5e6eb; 
            padding: 5px;
            background: #fff;
            border-radius: 4px;
        }

       .follow-text {
            font-size: 14px;
            color: #86909c; 
            margin-top: 10px;
        }

       .collapse-btn {
            cursor: pointer;
        }

        hr {
        border: none;
        height: 1px;
        background-color: #f0f2f5; 
      }
      
      .fullscreen {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          background: #f7f9fc;
      }
      
      .fullscreen .top-info {
          display: none !important;
      }
      
      .fullscreen-close-btn {
          position: fixed;
          top: 10px;
          right: 10px;
          z-index: 10000;
          background: #07C160; 
          color: white;
          border: none;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          font-size: 20px;
          cursor: pointer;
          display: none;
          justify-content: center;
          box-shadow: 0 2px 8px rgba(7, 193, 96, 0.3);
          transition: opacity 0.3s ease;
      }

      .fullscreen-close-btn:hover {
          opacity: 0.9;
      }

      .fullscreen-close-btn i{
        display: grid;
        align-content: center;
        justify-content: center;
    }
    </style>
</head>
<body>
    <div class="sidebar" id="sidebar">
        <div class="user-profile">
            <div class="user-initials">运</div>
            <span>运营素材库</span>
        </div>
        <div class="search-box">
            <input type="text" id="search-input" placeholder="搜索菜单">
        </div>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-book"></i>
            <span>文章编辑</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
      </a>
      <ul class="sub-menu">
            <li><a href="#" data-url="official-account-article.html" title="编辑预览"><span class="sub-menu-short">编</span><span>编辑预览</span></a></li>
            <li><a href="#" data-url="common/commonly.html" title="常用模版"><span class="sub-menu-short">常</span><span>常用模版</span></a></li>
      </ul>
       <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-water"></i>
            <span>素材工具</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="number-labels.html" title="数字标号"><span class="sub-menu-short">数</span><span>数字标号</span></a></li>
            <li><a href="#" data-url="segmentation-conforms.html" title="分割符号"><span class="sub-menu-short">分</span><span>分割符号</span></a></li>
            <li><a href="#" data-url="border-customizer.html" title="文字边框"><span class="sub-menu-short">文</span><span>文字边框</span></a></li>
            <li><a href="#" data-url="block-tool.html" title="区块工具"><span class="sub-menu-short">区</span><span>区块工具</span></a></li>
            <li><a href="#" data-url="tools/device-1001.html" title="水印工具"><span class="sub-menu-short">水</span><span>水印工具</span></a></li>
            <li><a href="#" data-url="tools/device-1002.html" title="婚礼请柬"><span class="sub-menu-short">婚</span><span>婚礼请柬</span></a></li>
            <li><a href="#" data-url="tools/device-1003.html" title="传统请柬"><span class="sub-menu-short">传</span><span>传统请柬</span></a></li>
            <li><a href="#" data-url="tools/device-1004.html" title="进度条（%）"><span class="sub-menu-short">进</span><span>进度条（%）</span></a></li>
            <li><a href="#" data-url="tools/device-1005.html" title="婚书模版"><span class="sub-menu-short">婚</span><span>婚书模版</span></a></li>
            <li><a href="#" data-url="tools/device-1006.html" title="简历模版"><span class="sub-menu-short">简</span><span>简历模版</span></a></li>
            <li><a href="#" data-url="tools/device-1007.html" title="图表工具"><span class="sub-menu-short">图</span><span>图表工具</span></a></li>
            <li><a href="#" data-url="tools/device-1008.html" title="采购清单"><span class="sub-menu-short">采</span><span>采购清单</span></a></li>
            <li><a href="#" data-url="tools/device-1009.html" title="引导关注"><span class="sub-menu-short">引</span><span>引导关注</span></a></li>
            <li><a href="#" data-url="tools/device-1010.html" title="备婚时间"><span class="sub-menu-short">备</span><span>备婚时间</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-film"></i>
            <span>长图制作</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
             <li><a href="#" data-url="model/model-1001.html" title="运营笔记"><span class="sub-menu-short">运</span><span>运营笔记</span></a></li>
             <li><a href="#" data-url="model/model-1002.html" title="运营指南"><span class="sub-menu-short">运</span><span>运营指南</span></a></li>
             <li><a href="#" data-url="model/model-1003.html" title="工具推荐"><span class="sub-menu-short">工</span><span>工具推荐</span></a></li>
             <li><a href="#" data-url="model/model-1004.html" title="搞笑文案"><span class="sub-menu-short">搞</span><span>搞笑文案</span></a></li>
             <li><a href="#" data-url="model/model-1005.html" title="文案信纸"><span class="sub-menu-short">文</span><span>文案信纸</span></a></li>
             <li><a href="#" data-url="model/model-1006.html" title="中秋整活"><span class="sub-menu-short">中</span><span>中秋整活</span></a></li>
             <li><a href="#" data-url="model/model-1007.html" title="今日黄历"><span class="sub-menu-short">今</span><span>今日黄历</span></a></li>
             <li><a href="#" data-url="model/model-1008.html" title="发文时间"><span class="sub-menu-short">发</span><span>发文时间</span></a></li>
             <li><a href="#" data-url="model/model-1009.html" title="命题技巧"><span class="sub-menu-short">命</span><span>命题技巧</span></a></li>
             <li><a href="#" data-url="model/model-1010.html" title="涨粉文案"><span class="sub-menu-short">涨</span><span>涨粉文案</span></a></li>
             <li><a href="#" data-url="model/model-1011.html" title="涨粉指南"><span class="sub-menu-short">涨</span><span>涨粉指南</span></a></li>
             <li><a href="#" data-url="model/model-1012.html" title="标题优化"><span class="sub-menu-short">标</span><span>标题优化</span></a></li>
             <li><a href="#" data-url="model/model-1013.html" title="文字卡片"><span class="sub-menu-short">文</span><span>文字卡片</span></a></li>
             <li><a href="#" data-url="model/model-1014.html" title="解决方案"><span class="sub-menu-short">解</span><span>解决方案</span></a></li>
             <li><a href="#" data-url="model/model-1015.html" title="学习指南"><span class="sub-menu-short">学</span><span>学习指南</span></a></li>
             <li><a href="#" data-url="model/model-1016.html" title="催婚压力"><span class="sub-menu-short">催</span><span>催婚压力</span></a></li>
             <li><a href="#" data-url="model/model-1017.html" title="标题技巧"><span class="sub-menu-short">标</span><span>标题技巧</span></a></li>
             <li><a href="#" data-url="model/model-1018.html" title="婚姻感悟"><span class="sub-menu-short">婚</span><span>婚姻感悟</span></a></li>
             <li><a href="#" data-url="model/model-1019.html" title="借钱感悟"><span class="sub-menu-short">借</span><span>借钱感悟</span></a></li>
             <li><a href="#" data-url="model/model-1020.html" title="牛马困惑"><span class="sub-menu-short">牛</span><span>牛马困惑</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-calculator"></i>
            <span>文章示例</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
             <li><a href="#" data-url="template/template-1001.html" title="情感模版"><span class="sub-menu-short">情</span><span>情感模版</span></a></li>
             <li><a href="#" data-url="template/template-1002.html" title="知识模版"><span class="sub-menu-short">知</span><span>知识模版</span></a></li>
             <li><a href="#" data-url="template/template-1003.html" title="科普模版"><span class="sub-menu-short">科</span><span>科普模版</span></a></li>
             <li><a href="#" data-url="template/template-1004.html" title="方案模版"><span class="sub-menu-short">方</span><span>方案模版</span></a></li>
             <li><a href="#" data-url="template/template-1005.html" title="咨询模版"><span class="sub-menu-short">咨</span><span>咨询模版</span></a></li>
             <li><a href="#" data-url="template/template-1006.html" title="攻略模版"><span class="sub-menu-short">攻</span><span>攻略模版</span></a></li>
             <li><a href="#" data-url="template/template-1007.html" title="旅游模版"><span class="sub-menu-short">旅</span><span>旅游模版</span></a></li>
             <li><a href="#" data-url="template/template-1008.html" title="标准模版"><span class="sub-menu-short">标</span><span>标准模版</span></a></li>
             <li><a href="#" data-url="template/template-1009.html" title="育儿模版"><span class="sub-menu-short">育</span><span>育儿模版</span></a></li>
             <li><a href="#" data-url="template/template-1011.html" title="知识盘点"><span class="sub-menu-short">知</span><span>知识盘点</span></a></li>
             <li><a href="#" data-url="template/template-1012.html" title="网络热梗"><span class="sub-menu-short">网</span><span>网络热梗</span></a></li>
             <li><a href="#" data-url="template/template-1013.html" title="噪音污染"><span class="sub-menu-short">噪</span><span>噪音污染</span></a></li>
             <li><a href="#" data-url="template/template-1014.html" title="热门文案"><span class="sub-menu-short">热</span><span>热门文案</span></a></li>
             <li><a href="#" data-url="template/template-1015.html" title="年入百万"><span class="sub-menu-short">年</span><span>年入百万</span></a></li>
             <li><a href="#" data-url="template/template-1016.html" title="增长方案"><span class="sub-menu-short">增</span><span>增长方案</span></a></li>
             <li><a href="#" data-url="template/template-1017.html" title="选题推荐"><span class="sub-menu-short">选</span><span>选题推荐</span></a></li>
             <li><a href="#" data-url="template/template-1018.html" title="行动思考"><span class="sub-menu-short">行</span><span>行动思考</span></a></li>
             <li><a href="#" data-url="template/template-1019.html" title="不做蠢人"><span class="sub-menu-short">不</span><span>不做蠢人</span></a></li>
             <li><a href="#" data-url="template/template-1020.html" title="爱情故事"><span class="sub-menu-short">爱</span><span>爱情故事</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-users"></i>
            <span>模版示例</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
             <li><a href="#" data-url="marriage/marr-1001.html" title="凭“眼缘”谈恋爱的人，为什么大多走不到最后？"><span class="sub-menu-short">1</span><span>凭“眼缘”谈恋爱的人，为什么大多走不到最后？</span></a></li>
             <li><a href="#" data-url="marriage/marr-1002.html" title="别只看“聊得来”！性格适配度的2个关键表现，藏着感情长久的密码"><span class="sub-menu-short">2</span><span>别只看“聊得来”！性格适配度的2个关键表现，藏着感情长久的密码</span></a></li>
             <li><a href="#" data-url="marriage/marr-1003.html" title="价值观不合的人，再爱也别将就！这4个问题帮你快速摸清TA的底线"><span class="sub-menu-short">3</span><span>价值观不合的人，再爱也别将就！这4个问题帮你快速摸清TA的底线</span></a></li>
             <li><a href="#" data-url="marriage/marr-1004.html" title="吵架时的态度比“不吵架”更重要！从2个细节判断TA是否愿意为你妥协"><span class="sub-menu-short">4</span><span>吵架时的态度比“不吵架”更重要！从2个细节判断TA是否愿意为你妥协</span></a></li>
             <li><a href="#" data-url="marriage/marr-1005.html" title="测试“良缘”的小技巧：一起做这件事，比聊100次天更能看清人心"><span class="sub-menu-short">5</span><span>测试“良缘”的小技巧：一起做这件事，比聊100次天更能看清人心</span></a></li>
             <li><a href="#" data-url="marriage/marr-1006.html" title="为什么恋爱过了“保鲜期”就容易冷战？3个根源不解决，矛盾只会越积越多"><span class="sub-menu-short">6</span><span>为什么恋爱过了“保鲜期”就容易冷战？3个根源不解决，矛盾只会越积越多</span></a></li>
             <li><a href="#" data-url="marriage/marr-1007.html" title="睡前10分钟“谈心仪式”：只说这3类话，让感情每天都有新连接"><span class="sub-menu-short">7</span><span>睡前10分钟“谈心仪式”：只说这3类话，让感情每天都有新连接</span></a></li>
             <li><a href="#" data-url="marriage/marr-1008.html" title="矛盾不过夜的 “魔法话术”：不说 “你错了”，换成这4句，吵架也能升温"><span class="sub-menu-short">8</span><span>矛盾不过夜的 “魔法话术”：不说 “你错了”，换成这4句，吵架也能升温</span></a></li>
             <li><a href="#" data-url="marriage/marr-1009.html" title="每周1次 “共同体验日”：低成本做这5件事，轻松找回热恋时的心动"><span class="sub-menu-short">9</span><span>每周1次 “共同体验日”：低成本做这5件事，轻松找回热恋时的心动</span></a></li>
             <li><a href="#" data-url="marriage/marr-1010.html" title="情侣互动计划表模板：按周规划不费力，感情保鲜再也不用靠 “想”"><span class="sub-menu-short">10</span><span>情侣互动计划表模板：按周规划不费力，感情保鲜再也不用靠 “想”</span></a></li>
             <li><a href="#" data-url="marriage/marr-1011.html" title="婚前不聊 “钱”，婚后准吵架！3个金钱规划问题，提前说清少矛盾"><span class="sub-menu-short">11</span><span>婚前不聊 “钱”，婚后准吵架！3个金钱规划问题，提前说清少矛盾</span></a></li>
             <li><a href="#" data-url="marriage/marr-1012.html" title="原生家庭边界感有多重要？这2个“底线问题”，必须跟TA达成共识"><span class="sub-menu-short">12</span><span>原生家庭边界感有多重要？这2个“底线问题”，必须跟TA达成共识</span></a></li>
             <li><a href="#" data-url="marriage/marr-1013.html" title="关于“生不生孩子”，别只说“顺其自然”！4个核心诉求提前对齐"><span class="sub-menu-short">13</span><span>关于“生不生孩子”，别只说“顺其自然”！4个核心诉求提前对齐</span></a></li>
             <li><a href="#" data-url="marriage/marr-1014.html" title="婚后谁牺牲事业？别回避！这3个沟通角度，帮你平衡职业与家庭"><span class="sub-menu-short">14</span><span>婚后谁牺牲事业？别回避！这3个沟通角度，帮你平衡职业与家庭</span></a></li>
             <li><a href="#" data-url="marriage/marr-1015.html" title="婚前沟通清单（可打印）：10个必聊话题，帮你把“隐患”提前清零"><span class="sub-menu-short">15</span><span>婚前沟通清单（可打印）：10个必聊话题，帮你把“隐患”提前清零</span></a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="top-info">
            <span title="以匠人之心精研运化，怀深厚期望宿命归来">匠心独运·硕望宿归</span>
            <div class="notification">
                <div class="collapse-btn" onclick="toggleSidebar()"><i class="fa-solid fa-bars" title="收起/展开菜单栏"></i></div>
                <div class="help-btn" onclick="openHelpPage()"><i class="fa-solid fa-question" title="帮助中心"></i></div>
                <div class="fullscreen-btn" onclick="toggleFullscreen()"><i class="fa-solid fa-expand" title="全屏显示"></i></div>
                <i class="fa-solid fa-bell" onclick="openVersionModal()" title="系统消息"></i>
                <i class="fa-solid fa-right-from-bracket logout-icon" onclick="openLogoutModal()" title="退出登录"></i>
            </div>
        </div>
        <iframe id="content-frame" src="home.html"></iframe>
    </div>
    
    <!-- 全屏关闭按钮 -->
    <button class="fullscreen-close-btn" onclick="toggleFullscreen()"><i class="fa-solid fa-compress"></i></button>

    <!-- 退出登录弹窗 -->
    <div id="logout-modal" class="modal">
        <div class="modal-content">
            <p>你确定要退出登录吗？</p>
            <div class="modal-buttons">
                <button class="confirm" onclick="confirmLogout()">确认</button>
                <button class="cancel" onclick="closeLogoutModal()">取消</button>
            </div>
        </div>
    </div>

    <!-- 版本信息弹窗 -->
    <div id="version-modal" class="version-modal">
        <div class="version-content">
            <div class="version-header">
                <h3>运营素材库版本信息</h3>
                <span class="close-btn" onclick="closeVersionModal()">&times;</span>
            </div>
            <div class="version-info">
                <p><strong>系统名称：</strong> 运营素材库</p>
                <p><strong>当前版本：</strong> v1.2.2</p>
                <p><strong>更新日期：</strong> 2025-09-29</p>
                <p><strong>工具统计：</strong> <span id="sub-menu-count"></span></p>
                <p><strong>登录账号：</strong> <span id="display-username"></span></p>
                <p><strong>登录时间：</strong> <span id="login-time"></span></p>
            </div>
            <div class="qrcode-container">
                <img src="img/qrcode_wcjs.jpg" alt="公众号二维码">
                <p class="follow-text">扫描二维码关注公众号，获取最新动态</p>
            </div>
            <hr>
            <div class="version-info">
                <p>如有工具集成建议，请投稿： <strong>987808567@qq.com</strong></p>
            </div>
        </div>
    </div>

    <script>
        function displayUserInfo() {
            const username = localStorage.getItem('wxUserName') || '用户';
            document.getElementById('display-username').textContent = username;

            const now = new Date(localStorage.getItem('loginTime'));
            const loginTime = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            document.getElementById('login-time').textContent = loginTime;
        }

        function openVersionModal() {
            displayUserInfo();
            document.getElementById('version-modal').style.display = 'block';
        }

        function closeVersionModal() {
            document.getElementById('version-modal').style.display = 'none';
        }

        window.onclick = function (event) {
            const versionModal = document.getElementById('version-modal');
            if (event.target == versionModal) {
                versionModal.style.display = 'none';
            }

            const logoutModal = document.getElementById('logout-modal');
            if (event.target == logoutModal) {
                logoutModal.style.display = 'none';
            }
        }

        const correctUsername = '79b4de7cf79777bf4af9e213ede350af';
        const correctPassword = '074320a058589e53ab25bbffb605c681';
        const usernameMd5 = localStorage.getItem('usernameMd5');
        const passwordMd5 = localStorage.getItem('passwordMd5');
        if (usernameMd5 === correctUsername && passwordMd5 === correctPassword) {

        } else {
            window.location.href = 'login.html';
        }
        const searchInput = document.getElementById('search-input');
        const menuItems = document.querySelectorAll('.sidebar a');
        searchInput.addEventListener('input', function () {
            const searchText = this.value.toLowerCase();
            menuItems.forEach(item => {
                const menuText = item.textContent.toLowerCase();
                if (menuText.includes(searchText)) {
                    item.style.display = 'flex';
                    const parentMenu = item.closest('.sub-menu')?.previousElementSibling;
                    if (parentMenu) {
                        parentMenu.style.display = 'flex';
                        const subMenu = parentMenu.nextElementSibling;
                        subMenu.style.display = 'block';
                        const icon = parentMenu.querySelector('.sub-menu-icon');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    }
                } else {
                    item.style.display = 'none';
                    const parentMenu = item.closest('.sub-menu')?.previousElementSibling;
                    if (parentMenu) {
                        const subMenu = parentMenu.nextElementSibling;
                        const allHidden = Array.from(subMenu.children).every(child => {
                            return child.querySelector('a').style.display === 'none';
                        });
                        if (allHidden) {
                            parentMenu.style.display = 'none';
                            subMenu.style.display = 'none';
                            const icon = parentMenu.querySelector('.sub-menu-icon');
                            icon.classList.remove('fa-chevron-up');
                            icon.classList.add('fa-chevron-down');
                        }
                    }
                }
            });
        });
        menuItems.forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();
                const hasSubMenu = item.classList.contains('parent-menu');
                if (!hasSubMenu) {
                    const url = this.getAttribute('data-url');
                    const iframe = document.getElementById('content-frame');
                    iframe.src = url;
                }
            });
        });

        function toggleSubMenu(menu) {
            const subMenu = menu.nextElementSibling;
            const icon = menu.querySelector('.sub-menu-icon');
            if (subMenu.style.display === 'none' || subMenu.style.display === '') {
                subMenu.style.display = 'block';
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            } else {
                subMenu.style.display = 'none';
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            }
        }

        function openLogoutModal() {
            const modal = document.getElementById('logout-modal');
            modal.style.display = 'block';
        }

        function closeLogoutModal() {
            const modal = document.getElementById('logout-modal');
            modal.style.display = 'none';
        }

        function confirmLogout() {
            localStorage.removeItem('usernameMd5');
            localStorage.removeItem('passwordMd5');
            window.location.href = 'login.html';
        }

        let isExpirationModalOpen = false;

        function checkTime() {
            const currentTime = new Date();
            const loginTime = new Date(localStorage.getItem('loginTime'));
            const timeDifference = currentTime - loginTime;
            const twoHoursInMilliseconds = 2 * 60 * 60 * 1000;
            const twentyFoursInMilliseconds = 12 * 60 * 60 * 1000;
            if(timeDifference > twentyFoursInMilliseconds){
                confirmLogout();
                return;
            }

            if (timeDifference > twoHoursInMilliseconds &&!isExpirationModalOpen) {
                showExpirationModal();
                isExpirationModalOpen = true;
            }
        }

        // 新增过期提示模态框
        function showExpirationModal() {
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.id = 'expiration-modal';
            modal.innerHTML = `
                <div class="modal-content">
                    <p>登录状态即将过期，是否重新登录？</p>
                    <div class="modal-buttons">
                        <button class="confirm" onclick="renewLogin()">是</button>
                        <button class="cancel" onclick="extendSession()">否</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
            modal.style.display = 'block';
        }

        function renewLogin() {
            window.location.href = 'login.html';
        }

        function extendSession() {
            const now = new Date();
            localStorage.setItem('loginTime', now);
            const modal = document.getElementById('expiration-modal');
            if (modal) {
                modal.style.display = 'none';
                modal.remove();
                isExpirationModalOpen = false;
            }
        }

        window.onclick = function (event) {
            const versionModal = document.getElementById('version-modal');
            if (event.target == versionModal) {
                versionModal.style.display = 'none';
            }

            const logoutModal = document.getElementById('logout-modal');
            if (event.target == logoutModal) {
                logoutModal.style.display = 'none';
            }

            const expirationModal = document.getElementById('expiration-modal');
            if (event.target == expirationModal) {
                expirationModal.style.display = 'none';
                expirationModal.remove();
                isExpirationModalOpen = false;
            }
        }

        setInterval(checkTime, 60 * 1000); 

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('collapsed');
        }

        function openHelpPage() {
            window.open('https://gitee.com/lanchny/Wetemp', '_blank'); 
        }
        
        function toggleFullscreen() {
            const mainContent = document.querySelector('.main-content');
            const fullscreenBtn = document.querySelector('.fullscreen-btn i');
            const closeBtn = document.querySelector('.fullscreen-close-btn');
            
            if (mainContent.classList.contains('fullscreen')) {
                mainContent.classList.remove('fullscreen');
                fullscreenBtn.classList.remove('fa-compress');
                fullscreenBtn.classList.add('fa-expand');
                closeBtn.style.display = 'none';
                document.title = '运营素材库-全场景工具集';
            } else {
                mainContent.classList.add('fullscreen');
                fullscreenBtn.classList.remove('fa-expand');
                fullscreenBtn.classList.add('fa-compress');
                closeBtn.style.display = 'flex';
                document.title = '全屏模式 | 运营素材库';
            }
        }
        
        function countSubMenus() {
            const subMenuItems = document.querySelectorAll('.sub-menu li');
            const subMenuCountElement = document.getElementById('sub-menu-count');
            subMenuCountElement.textContent = `当前工具集${subMenuItems.length}个`;
            checkTime();
        }

        window.addEventListener('load', countSubMenus);
    </script>
</body>

</html>